<template>
	<div>
		<MkBillPanel :bill="ctx.entity">
			<template #button>
				<MkButtonQueryHistory @click="listRef.open()" />
				<MkButtonAdd @click="newEntity" :isEdit='ctx.isEdit' />
				<MkButtonSubmit @click="submit" :loading="ctx.loading" :isEdit="ctx.isEdit" />
				<MkButtonMore>
					<a-menu-item @click="cancel">作废</a-menu-item>
				</MkButtonMore>
				<MkButtonMore title="打印" @click="print" icon="ele-Printer">
					<a-menu-item @click="printALL">打印汇总</a-menu-item>
				</MkButtonMore>
			</template>
			<template #info>
				<MkForm :model='ctx.entity' ref='formRef' formId='InvLianWangRuKu' :col="3">
					<MkInput label='血液来源' v-model='ctx.entity.xueYeLaiYuanId' prop='xueYeLaiYuanId'
						:isEdit='ctx.isEdit' />
					<MkInput label='来源单号' v-model='ctx.entity.laiYuanDanHao' prop='laiYuanDanHao' required
						:isEdit='ctx.isEdit' />
					<el-row>
						<MkInput label='入库院区' v-model='ctx.entity.ruKuYuanQuId' prop='ruKuYuanQuId'
							:isEdit='ctx.isEdit' />
						<MkInput label='备注' v-model='ctx.entity.remark' prop='remark' :isEdit='ctx.isEdit' :col="2" />
					</el-row>
				</MkForm>
			</template>
			<MkTable :data="ctx.tableData">
				<MkColumnIndex />
				<MkColumn prop="xianXueMa" label="献血码" />
				<MkColumn prop="chanPinId" label="产品码" />
				<MkColumn prop="mingCheng" label="血液名称" />
				<MkColumn prop="abo" label="ABO" />
				<MkColumn prop="rhD" label="RhD" />
				<MkColumn prop="rongLiang" label="容量" />
				<MkColumn prop="danWei" label="单位" />
				<MkColumn prop="jiaGe" label="价格" />
				<MkColumn prop="caiXueShiJian" label="采血时间" />
				<MkColumn prop="zhiBeiShiJian" label="制备时间" />
				<MkColumn prop="shiXiaoShiJian" label="失效时间" />
				<MkColumnOption @show="editMingXi" :isMore="false" />
			</MkTable>
		</MkBillPanel>
		<ListPage ref='listRef' @load='loadEntity' />
	</div>
</template>

<script setup lang="ts">
// 手工入库
// InvRuKu
import { InvRuKuApi, InvRuKuAddInput, InvRuKuUpdateInput, InvRuKuMingXiInput, InvRuKuOutput } from '/@/api/inv/InvRuKu';
import { isNull, clog, showSuccess } from '/@/utils';
import { useConfirmDialog } from '/@/hooks'
import ListPage from './list.vue'

const formRef = ref();
const listRef = ref();
const ctx = reactive({
	isEdit: false,
	loading: false,
	entity: { danJuLeiXing: "联网入库" } as InvRuKuOutput,
	tableData: [] as InvRuKuMingXiInput[],
	mingXi: {} as InvRuKuMingXiInput,
});

const newEntity = () => {
	formRef.value.resetFields();
	ctx.entity = { danJuLeiXing: "联网入库" } as InvRuKuOutput;
	ctx.isEdit = true;
}

const loadEntity = (entity: InvRuKuOutput) => {
	formRef.value.resetFields();
	ctx.entity = entity;
	ctx.isEdit = false;
	// TODO 获取明细
}

const editMingXi = (row: any) => {
	ctx.mingXi = row;
	showSuccess("编辑");
}

const print = () => {
	showSuccess("打印")
}

const printALL = () => {
	showSuccess("printALL")
}

// 作废
const cancel = () => {
	useConfirmDialog("确认作废吗?").then(() => {
		ctx.entity = { danJuZhuangTai: '已作废' } as InvRuKuOutput;
		// TODO 调用单据作废接口
		showSuccess('已作废')
	})
}

const submit = async () => {
	if (!ctx.isEdit) {
		close();
		return;
	}
	// 表单验证
	const validate = await formRef?.value?.validate();
	if (!validate) return;
	ctx.loading = true;
	if (isNull(ctx.entity.id)) {
		ctx.entity.danJuZhuangTai = "已审核";
		ctx.entity = await InvRuKuApi.add(ctx.entity as unknown as InvRuKuAddInput);
	} else {
		await InvRuKuApi.update(ctx.entity as unknown as InvRuKuUpdateInput);
	}
	showSuccess()
	ctx.isEdit = false;
	ctx.loading = false;
	close();
};
</script>
